<template>
	<div class="cloneContainer">
		<div class="header">
			<a-input-search allowClear v-model:value="searchData['search_AND_LIKE_name']" :placeholder="t('control', '请输入名称')" style="width: 220px" @search="show" />
			<a-button type="primary" @click="handleClick({ name: '新建AI' })">{{t('control', '新建AI')}}</a-button>
		</div>
		<div class="content">
			<div style="flex:1;min-height: 0;overflow: auto;">
				<a-table :dataSource="tableData" :columns="columns" :pagination="false">
					<template #bodyCell="{ column, text, record, index }">
						<template v-if="column.key === 'operate'">
							<a style="margin-left: 12px" @click="handleClick({ name: '编辑', record, index })">{{t('common', '编辑')}}</a>
							<a-popconfirm :title="t('table','确定删除吗？')" @confirm="handleClick({ name: '删除', record, index })">
								<a  style="margin-left: 12px; color: #ff454a">{{t('common', '删除')}}</a>
							</a-popconfirm>
						</template>
					</template>
				</a-table>
			</div>
			<a-pagination style="text-align: center" @change="show" v-model:current="pagination.current" show-size-changer  v-model:pageSize="pagination.size"
				:total="pagination.totalElements" />
		</div>

		<a-modal v-model:open="modal.visible" :footer="null">
			<a-form ref="formRef" v-bind="{ layout: 'vertical' }" :model="formModel" :rules="rules">
				<a-form-item has-feedback :label="t('modal', '名称')" name="name">
					<a-input v-model:value="formModel.name" autocomplete="off" />
				</a-form-item>
				<a-form-item has-feedback :label="t('modal', '应用APPID')" name="appId">
					<a-input v-model:value="formModel.appId" autocomplete="off" />
				</a-form-item>
				<a-form-item has-feedback :label="t('modal', 'key')" name="token">
					<a-input v-model:value="formModel.token" autocomplete="off" />
				</a-form-item>
				<a-form-item has-feedback :label="t('modal', '简介说明')" name="explanation">
					<a-textarea  v-model:value="formModel.explanation"  />
				</a-form-item>
				<a-form-item has-feedback :label="t('modal', '是否为工作流')" name="workflow">
					<a-select v-model:value="formModel.workflow" style="width: 100%;" :placeholder="t('common', '请选择')">
            <a-select-option value="Y">{{t('select', '是')}}</a-select-option>
            <a-select-option value="N">{{t('select', '否')}}</a-select-option>
          </a-select>
				</a-form-item>
				<a-form-item v-if="!modal.formDisable"  style="text-align: center;padding-top: 20px;">
					<a-button type="primary" @click="handleSubmit" :loading="loading">{{ t('common', '提交') }}</a-button>
					<a-button style="margin-left: 20px" @click="modal.visible = false">{{t('common', '取消')}}</a-button>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { aiDifyPage, aiDifyFindById, aiDifySave, aiDifyDelete } from '@/request/teacher/courseAI'
import { typeCategory, teacherList } from '@/request/addAndEditProject'
import { message } from 'ant-design-vue'
import { t } from '@/i18n'
const columns = [
	{
		title: t('table', '序号'),
		dataIndex: 'index',
		customRender: (record) => record.index + 1,
	},
	{ title: t('table', '课程项目名称'), dataIndex: 'name', key: 'name' },
	{ title: t('table', '操作'), dataIndex: 'operate', key: 'operate' },
]
const tableData = ref([])
const selectStructure = ref({})
const firstShow = async () => {
  let res = {
    课程: await typeCategory({ field: 'course_category' }),
    // 教师列表: await teacherList()
  }
  if (res['课程']) selectStructure.value.course = res['课程'].data
	// if (res['教师列表']) selectStructure.value.coTeacherIds = res['教师列表'].data
}
firstShow()

const searchData = ref({})
const pagination = ref({ totalElements: 0, current: 1, size: 10 })
const show = async (page,pageSize) => {
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
		...searchData.value,
		search_AND_EQ_identity: 'learning'
	}
	let res = await aiDifyPage(req)
	if (!res) return
	tableData.value = res.data.content
	pagination.value = {
		...pagination.value,
		...res.data.page
	}
}
show()

const modal = reactive({ visible: false, formDisable: false, name: '' })
const formModel = ref({})
const formRef = ref()
const rules = {
	name: [
		{ required: true, message:  t('common','请输入'), trigger: 'change', },
	],
	appId: [
		{ required: true, message:  t('common','请输入'), trigger: 'change', },
	],
	description: [
		{ required: true, message:  t('common','请输入'), trigger: 'change', },
	],
	token: [
		{ required: true, message:  t('common','请输入'), trigger: 'change', },
	],
	isWorkflow: [
		{ required: true, message:  t('common','请输入'), trigger: 'change', },
	],
}

const handleClick = async ({ name, record }) => {
	let req = {
		...record
	}
	let res = null
	switch (name) {
		case '新建AI':
			formModel.value = {}
			modal.visible = true
			modal.name = t('control','新建AI')
			formRef?.value?.resetFields()
			break
		case '编辑':
			res = await aiDifyFindById(req)
			if (!res) return
			formModel.value = {
				...res.data,
			}
			modal.visible = true
			modal.name = t('common','编辑')
			break
		case '删除':
			res = await aiDifyDelete([req.id])
			if (!res) return
			message.success(t('common','操作成功'))
			show()
			break
	}
}

const handleSubmit = async () => {
  let v = await formRef.value.validate().catch(err => false)
	if (!v) return message.error(t('common','请检查表单数据'))
	let req = {
		identity: 'learning',
		...formModel.value
	}
	let res = await aiDifySave(req)
	if (!res) return
	message.success(t('common','操作成功'))
	modal.visible = false
	show()
}

</script>

<style lang="scss" scoped>
.cloneContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		border-radius: 10px;
		height: 80px;
		padding: 20px;
	}

	.content {
		margin-top: 20px;
		padding: 20px;
		overflow: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 10px;
	}
}
</style>